<template>
	<view>
		<view style="width:60%;margin:auto">
			<fui-segmented-control color="#FFDD00" activeColor="#000" :values="HengshuTabs"
				@click="changeHengshu"></fui-segmented-control>
		</view>
		<view>
			<fui-tabs :tabs="templateLists[currentTabIndex].Class" :current="tweLevelTabIndex" :short="false" size="24"
				selectedSize="26" isSlider scroll alignLeft selectedColor="#000" sliderBackground="#FFDD00"
				@change="changeClass"></fui-tabs>
		</view>
		<view>
			<swiper :current="tweLevelTabIndex" :duration="300" @change="tabChange" style="height:88vh">
				<swiper-item v-for="page in templateLists[currentTabIndex].Class.length" :key="page">
					<scroll-view scroll-y style="height:88vh">
						<view v-for="(item, index) in currentTemplateList" :key="index" @click="selectPics(index)">
							<view class="picTitle">{{ item.MokaTemplateName }}</view>

							<!-- 代表图  item.ResultImage 代表图字段 -->
							<view v-if="item.ResultImage"
								style="display: flex;justify-content: center;align-items: center;">
								<image :src="item.ResultImage"
									:style="{width: item.MokaWidth*item.MokaTempRate+'rpx', height: item.MokaHeight*item.MokaTempRate+'rpx'}">
								</image>
							</view>

							<!-- 生成模板 -->
							<view class="" v-else>

								<!-- start：模板 -->
								<view :style="{
										margin: 'auto',
										width: item.MokaWidth*item.MokaTempRate+'rpx', 
										height: item.MokaHeight*item.MokaTempRate+'rpx', 
										backgroundColor: '#FFF', 
										padding: item.MokaPadding*item.MokaTempRate+'rpx', 
										position: 'relative',
										boxShadow:'0rpx 0rpx 13rpx 0rpx #dadada'
									}">

									<!-- 文字标题 -->
									<view :style="{
											position: 'absolute',
											top:item.TitleBoxTop*item.MokaTempRate + 'rpx',
											left:item.TitleBoxLeft*item.MokaTempRate + 'rpx' ,
											width: item.TextBoxWidth*item.MokaTempRate+'rpx',
											fontSize: item.TitleSize*item.MokaTempRate+'rpx', 
											color: item.TitleColor,
											zIndex: '999'
										}">
										{{ JSON.parse(item.TextJson).title }}
									</view>

									<!-- start：环绕式顶部文字 由于盒子嵌套问题所有放这 -->
									<view v-if="currentTabIndex === 0 && tweLevelTabIndex === 3" :style="{
											position:'absolute', 
											top:item.HeadlineTop*item.MokaTempRate + 'rpx', 
											left:item.HeadlineLeft*item.MokaTempRate + 'rpx', 
											fontSize:item.HeadlineSize*item.MokaTempRate + 'rpx', 
											color: item.HeadlineColor, zIndex:'99' 
										}">
										<text>{{ item.Headline }}</text>
									</view>
									<!-- end：环绕式顶部文字 由于盒子嵌套问题所有放这 -->


									<!-- start：文字外层盒子 -->
									<view :style="{
											width: item.TextBoxWidth*item.MokaTempRate+'rpx',
											height: item.TextBoxHeight*item.MokaTempRate+'rpx', 
											backgroundColor: item.TextBoxBackgroundColor, 
											top: item.TextBoxTop*item.MokaTempRate + 'rpx', 
											left: item.TextBoxLeft*item.MokaTempRate + 'rpx',
											position: 'absolute', 
											zIndex:'99'
										}">


										<view :style="{
												padding:item.TextBoxPadding*item.MokaTempRate+'rpx',
												paddingLeft: item.TextBoxPaddingLeft*item.MokaTempRate+'rpx',
												paddingTop: item.TextBoxPaddingTop*item.MokaTempRate+'rpx',
												display:item.TextModelType == 1 ? 'flex' : '',    				// 1 横版 2 竖版
												flexWrap:item.TextModelType == 1 ? 'wrap' : '',    				// 1 横版 2 竖版
												justifyContent: item.TextMemoPatternType == 1 ? 'center' : ''
											}
										">

											<!-- {{ item.TextModelType }} -->
											<!-- display:item.TextModelType == 1 ? 'inline-block' : 'block',whiteSpace:item.TextModelType == 1?'nowrap':'',   -->
											<view v-for="(itm,idx) in JSON.parse(item.TextJson).memo" :key="idx" :style="{
													fontSize: item.MemoSize*item.MokaTempRate  + 'rpx',
													color: item.MemoColor, 
													marginBottom:item.TextMarginBottom*item.MokaTempRate+'rpx',
													marginRight:item.TextMarginRight*item.MokaTempRate+'rpx',
												}">
												<view :style="{lineHeight:item.TextLineHeight*item.MokaTempRate+'rpx',}"
													v-if="itm.checked">
													<text :style="{
															transform:platformStyle == 1 ? 'scale(0.6)' : '',
															transformOrigin:platformStyle == 1 ? 'left top' : '', 
															display:item.TextArrangeType == 2 ? 'block' : ''
														}">
														{{ itm.key }} {{ item.TextEnShow == 1 ? itm.en : ''}}
													</text>
													<text :style="{
														transform:platformStyle == 1? 'scale(0.6)': '',
														transformOrigin:platformStyle == 1?'left bottom': '',
														marginTop:platformStyle != 1?'8rpx':'', 
													}">
														{{ itm.value }}
													</text>
												</view>

											</view>
										</view>




















										<!-- start：竖版文字-->
										<!-- 	<view v-if="currentTabIndex === 1 " :style="{padding:item.TextBoxPadding*item.MokaTempRate+'rpx', textAlign: 'center',width: item.TextBoxWidth*item.MokaTempRate+'rpx', height: item.TextBoxHeight*item.MokaTempRate+'rpx',top:item.TextBoxTop*item.MokaTempRate+'rpx'}">
											
											<view :style="{width: item.TextBoxWidth*item.MokaTempRate+'rpx', fontSize: item.TitleSize*item.MokaTempRate+'rpx', color: item.TitleColor,textAlign:'center',zIndex: '999'}">
												{{ JSON.parse(item.TextJson).title }}
											</view>
											<text
												v-for="(itm,idx) in JSON.parse(item.TextJson).memo" :key="idx"
												:style="{fontSize: item.MemoSize*item.MokaTempRate+'rpx', color: item.MemoColor,marginRight: '10rpx'}"
											>
												{{ itm.key }}: {{ itm.value }}
											</text>
										</view> -->
										<!-- end：竖版文字-->

										<!-- start：侧边式文字 || 插入式文字 -->
										<!-- <view  v-if="currentTabIndex === 0 && (tweLevelTabIndex === 0 || tweLevelTabIndex === 1)" :style="{padding:item.TextBoxPadding*item.MokaTempRate+'rpx',paddingLeft: item.TextBoxPaddingLeft*item.MokaTempRate+'rpx',paddingTop: item.TextBoxPaddingTop*item.MokaTempRate+'rpx',lineHeight:item.TextLineHeight*item.MokaTempRate+'rpx'}">
											
											<view
												v-for="(itm,idx) in JSON.parse(item.TextJson).memo" :key="idx"
												:style="{
													fontSize: item.MemoSize*item.MokaTempRate  + 'rpx',
													color: item.MemoColor, width:item.TextWidth*item.MokaTempRate+'rpx',
													height:item.TextHeight*item.MokaTempRate+'rpx',
													marginTop:'8rpx',
												}"
											>
												<view :style="{transform:platformStyle == 1? 'scale(0.6)': '',transformOrigin:platformStyle == 1?'left top': ''}">{{ itm.key }}</view>
												<view :style="{transform:platformStyle == 1? 'scale(0.6)': '',transformOrigin:platformStyle == 1?'left bottom': '',	marginTop:platformStyle != 1?'8rpx':''}">{{ itm.value }}</view>
											</view>
										</view> -->
										<!-- end：侧边式文字 || 插入式文字 -->

										<!-- start：底部式文字 -->
										<!-- <view v-if="currentTabIndex === 0 && tweLevelTabIndex === 2"  :style="{transform:platformStyle == 1? 'scale(0.6)': '',transformOrigin:platformStyle == 1?'left center': '',whiteSpace:'nowrap'}">
											<view v-for="(itm, idx) in JSON.parse(item.TextJson).memo" :key="idx" :style="{fontSize: item.MemoSize*item.MokaTempRate+'rpx', color: item.MemoColor,marginRight: '20rpx',display:'inline-block'}">
											    <view>{{ itm.key }}</view>
											    <view>{{ itm.value }}</view>
											</view>
										</view> -->
										<!-- end：底部式文字 -->

										<!-- start：环绕式文字 -->
										<!-- <view class="surround"  v-if="currentTabIndex === 0 && tweLevelTabIndex === 3">
											<view :style="{fontSize: item.MemoSize*item.MokaTempRate+'rpx', color: item.MemoColor,whiteSpace:'nowrap'}" >
												<view class=""
													v-for="(itm, idx) in  JSON.parse(item.TextJson).memo" :key="idx" 
													v-if="itm.en == 'HEIGHT' || itm.en == 'WEIGHT'"
													:style="{
														paddingLeft: item.TextBoxPaddingLeft*item.MokaTempRate+'rpx',
														paddingTop: item.TextBoxPaddingTop*item.MokaTempRate+'rpx',
														flex: '1',
														textAlign:'center',
														display:'inline-block',
														marginLeft:itm.en == 'WEIGHT'? '10rpx': '',
														transform:platformStyle == 1? 'scale(0.6)': '',
														transformOrigin:platformStyle == 1?'center': ''
													}
												">
													{{ itm.key }}:{{ itm.value}}{{itm.en == 'HEIGHT'? 'cm': 'kg'}}
												</view>
											</view>
										</view> -->
										<!-- end：环绕式文字 -->

										<!-- start：悬浮式文字 -->
										<!-- <view v-if="currentTabIndex === 0 && tweLevelTabIndex === 4" :style=" {fontSize: item.MemoSize*item.MokaTempRate+'rpx', color: item.MemoColor,width:item.TextBoxWidth*item.MokaTempRate + 'rpx',display:'flex',justifyContent:'center',alignItems:'center',flexWrap:'wrap',paddingLeft: item.TextBoxPaddingLeft*item.MokaTempRate+'rpx',paddingTop: item.TextBoxPaddingTop*item.MokaTempRate+'rpx'}" >
										
											<text v-for="(itm, idx) in JSON.parse(item.TextJson).memo" :key="idx" :style="{width:item.TextWidth*item.MokaTempRate+'rpx',height:item.TextHeight*item.MokaTempRate+'rpx',textAlign: 'left',transform:platformStyle == 1? 'scale(0.6)':s '',transformOrigin:platformStyle == 1?'left center': ''}">{{ itm.key }}:{{ itm.value }}</text>
										</view> -->
										<!-- end：悬浮式文字 -->

									</view>
									<!-- start：文字外层盒子 -->

									<!-- start：图片外层盒子 -->
									<view
										:style="{position: 'absolute', width: item.PicBoxWidth*item.MokaTempRate+'rpx', height: item.PicBoxHeight*item.MokaTempRate+'rpx', top: item.PicBoxTop*item.MokaTempRate+'rpx', left: item.PicBoxLeft*item.MokaTempRate+'rpx', backgroundColor: item.PicBoxBackgroundColor}">
										<view v-for="(itm, idx) in item.TemplatePics" :key="idx"
											:style="{width: itm.PicWidth*item.MokaTempRate+'rpx', height: itm.PicHeight*item.MokaTempRate+'rpx', position: 'absolute', top: itm.PicTop*item.MokaTempRate+'rpx', left: itm.PicLeft*item.MokaTempRate+'rpx', backgroundColor: '#666', overflow: 'hidden'}">
											<image :src="itm.PicSrc" mode="widthFix"
												:style="{width:'100%',position:'relative',top: itm.ImgTop*item.MokaTempRate+'rpx', left: itm.ImgLeft*item.MokaTempRate+'rpx'}">
										</view>
									</view>
									<!-- end：图片外层盒子 -->

								</view>
								<!-- end：模板 -->
							</view>

						</view>
						<view class="" style="height: 100rpx;"></view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		getMokaTemplateList
	} from '@/api/moka.js'
	export default {
		data() {
			return {
				LoginInfo: {},
				templateTypeID: 0,
				HengshuTabs: [{
						id: 1,
						name: '横版'
					},
					{
						id: 2,
						name: '竖版'
					}
				],
				mokaStyle: 1,
				currentTabIndex: 0,
				templateLists: [],
				currentTemplateList: [],
				// mokaTempRate: 1,
				mokaTemplate: {},
				tempFiles: [],
				tempLength: 0,
				startX: 0,
				startY: 0,
				currentIndex: -1,
				tweLevelTabIndex: 0,
				// tabList: [],
				// isTabIndex: false
				platformStyle: 0,
			};
		},
		onLoad(option) {
			this.templateTypeID = option.templateTypeID;
			this.currentTabIndex = 0;
			this.onGetList();


			uni.getSystemInfo({
				success: (res) => {
					if (res.platform == 'android') this.platformStyle = 1;
					if (res.platform == 'ios') this.platformStyle = 0;
				}
			})
		},
		onShow() {},
		methods: {

			// 获取模卡数据
			onGetList() {
				getMokaTemplateList({
					templateTypeID: this.templateTypeID
				}).then(res => {
					// console.log('MokaList', res);
					if (res.code == 200) {
						this.templateLists = res.data;
						if (this.templateLists.length != 0) {
							this.templateLists[0].Class.forEach((item, index) => {
								item.Template.forEach(itm => {
									if (Number(itm.MokaTempListRate) != 0) {
										itm.MokaTempRate = itm.MokaTempListRate
									}
								})
							})
							this.templateLists[1].Class.forEach((item, index) => {
								item['index'] = index;

								item.Template.forEach(itm => {
									if (Number(itm.MokaTempListRate) != 0) {
										itm.MokaTempRate = itm.MokaTempListRate
									}
								})
							})
						}


						// console.log('this.templateLists[0].Class' , this.templateLists[0].Class)
						this.currentTemplateList = this.templateLists[this.currentTabIndex].Class[0].Template;
						this.currentTemplateList.forEach((item, index) => {

							// item.TextJson = '{"memo":[{"en":"BIRTH","key":"\u751f\u65e5 BIRTH","value":"1990-01-01","id":"1"},{"en":"HEIGHT","key":"\u8eab\u9ad8 HEIGHT","value":"172","id":"2"},{"en":"WEIGHT","key":"\u4f53\u91cd WEIGHT","value":"48","id":"3"},{"en":"BUST","key":"\u80f8\u56f4 BUST","value":"83","id":"4"},{"en":"WAIST","key":"\u8170\u56f4 WAIST","value":"60","id":"5"},{"en":"HIPS","key":"\u81c0\u56f4 HIPS","value":"86","id":"6"},],"title":"YIYI"}';
							// console.log(item)
							// item['MemoMarginTop'] = 5;       	// 内容文字距上的距离
							// item['isWrap'] = 0;       			// 内容文字距上的距离  0不换,1换
							// item['MemoMarginRight'] = 10	;		// 内容文字距左的距离
							// // item['TextContent'] = ["1","2","3","4","5","6"];
							// item['TextContent'] = ["BIRTH","BUST","WAIST","HEIGHT","WEIGHT","HIPS"];
							// item['TextModelType'] = 1;



						})
						// console.log('currentTemplateList', this.templateLists);
					}

				});
			},
			changeHengshu(e) {
				console.log('changeHengshu', e)
				// this.templateTypeID = e.id;
				this.tweLevelTabIndex = 0;
				this.currentTabIndex = e.index;
				this.mokaStyle = e.id;
				this.currentTemplateList = this.templateLists[this.currentTabIndex].Class[0].Template;
				// this.onGetList()
			},

			tabChange(e) {
				this.tweLevelTabIndex = e.detail.current;
			},
			changeClass(e) {
				this.currentTemplateList = e.Template;
				this.tweLevelTabIndex = e.index;


				// this.tabList.push(0,1,2,3,4,5,6,7,8,9,10) 
				// this.tabList.forEach((item,index) =>{
				// 	if (e.index === index ) this.isTabIndex = true
				// })
				// if(this.tabList && this.tabList.length >= 2) {
				// 	this.tabList.splice(0,1)
				// }
				// console.log('this.tabList', this.tabList.includes(this.tweLevelTabIndex))

				// 测试数据
				// this.currentTemplateList.forEach((item) =>{
				// item.TextJson = '{"memo":[{"en":"BIRTH","key":"\u751f\u65e5 BIRTH","value":"1990-01-01","id":"1"},{"en":"HEIGHT","key":"\u8eab\u9ad8 HEIGHT","value":"172","id":"2"},{"en":"WEIGHT","key":"\u4f53\u91cd WEIGHT","value":"48","id":"3"},{"en":"BUST","key":"\u80f8\u56f4 BUST","value":"83","id":"4"},{"en":"WAIST","key":"\u8170\u56f4 WAIST","value":"60","id":"5"},{"en":"HIPS","key":"\u81c0\u56f4 HIPS","value":"86","id":"6"},],"title":"YIYI"}'
				// item['TextContent'] = ["HEIGHT","WEIGHT"];
				// item['TextModelType'] = 1;
				// })

				// console.log('currentTemplateList', this.currentTemplateList);
			},
			makeMoka(index) {
				uni.navigateTo({
					url: '/moka/pages/mokaSelectPic?style=' + this.mokaStyle + '&mokaTemplateID=' + this
						.currentTemplateList[index].MokaTemplateID
				})
			},
			selectPics(index) {
				// return;

				this.mokaTemplate = this.currentTemplateList[index];
				this.mokaTemplateID = this.mokaTemplate.MokaTemplateID

				let _that = this;

				// console.log('imageCount', _that.mokaTemplate.TemplatePics.length);

				uni.chooseMedia({
					count: _that.mokaTemplate.TemplatePics.length,
					mediaType: ['image'],
					sourceType: ['album'],
					sizeType: ['compressed'],
					success(res) {
						// console.log('res.tempFiles.length' , res.tempFiles)
						if (res.tempFiles.length < _that.mokaTemplate.TemplatePics.length) {
							uni.showToast({
								title: '照片数量不足，请选择' + _that.mokaTemplate.TemplatePics.length + '张照片',
								icon: 'none'
							})
							return false;
						} else {
							_that.setPics(-1, res.tempFiles)
						}
					}
				})
			},
			setPics(index, tempFiles) {
				// console.log('tempFiles', tempFiles)

				if (index == -1) {
					this.tempFiles = tempFiles
					// console.log(this.tempFiles)
					this.tempLength = this.tempFiles.length
				} else {

					this.tempFiles.splice(index, 1, tempFiles[0]);
				}

				uni.setStorageSync("tempMoka", this.tempFiles);
				let tabData = {
					tweLevelTabIndex: this.tweLevelTabIndex,
					currentTabIndex: this.currentTabIndex
				}
				// console.log('tabData' , tabData)
				uni.setStorageSync("tabData", tabData)

				uni.navigateTo({
					url: '/moka/pages/mokaMakeTarget?style=' + this.mokaStyle + '&mokaTemplateID=' + this
						.mokaTemplateID
				})

				// console.log('this.tempFiles', this.tempFiles)
			},
		}
	}
</script>

<style lang="scss">
	.picTitle {
		margin: 20rpx;
		padding: 5rpx;
		padding-left: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		border-left: 5rpx solid #FFDD00;
	}

	.picDemo {
		width: 100%;
		height: 300rpx;
		background-color: #CCC;
	}

	.surround {
		text-align: center;
	}
</style>